<template>
  <div class="box_big">
    <header>
      <div class="header_top">
        <div class="time">
          <span>{{ time.year }}-{{ time.month }}-{{ time.day }}</span>
          <span>{{ time.hours }}:{{ time.minutes }}:{{ time.seconds }}</span>
        </div>
        <div class="tab">
          <div v-for="i in data.slice(0, 2)" :key="i.id" @click="btn_tab1(i.id)" :class="i.id == setTab ? 'opt' : ''">
            <span>{{ i.name }}</span>
          </div>
        </div>
        <div class="title">人类活动监测大屏</div>
        <div class="tab">
          <div v-for="i in data.slice(2, 4)" :key="i.id" @click="btn_tab2(i.id)" :class="i.id == setTab ? 'opt' : ''">
            <span>{{ i.name }}</span>
          </div>
        </div>
        <div class="hint"></div>
      </div>

      <nav>
        <div class="nav_left"></div>
        <div class="nav_center">
          <RouterLink v-for="(item, index) in  navList" :key="index" :to="{ path: item.path }" class="nav"
            @click="a_tab(index)" :class="index == setAtab ? 'opts' : ''"><span>{{ item.name }}</span></RouterLink>
        </div>
        <div class="nav_right">
          <img src="./assets/img/yj.png" alt="">
        </div>
      </nav>
    </header>


    <div class="mybox">
      <RouterView />
    </div>
  </div>
</template>


<script setup>
// import { RouterLink, RouterView } from 'vue-router'
import { onMounted, onUnmounted } from "vue";
import { getTime } from "./utils/time"
let time = ref([]);
let data = ref([
  { id: 1, name: '人类活动' },
  { id: 2, name: '鸟类监控' },
  { id: 3, name: '环境监测' },
  { id: 4, name: '巡护监测' },
]);
let navList = ref([
  { name: '地图监测', path: '/' },
  { name: '监控画面', path: '/about' },
  { name: '统计分析', path: '/Statistics' },
])
let setTab = ref(1)
let setAtab = ref(0)
let updateDateTime = () => {
  time.value = getTime();
};
// 在组件挂载后立即更新一次日期和时间
onMounted(() => {
  updateDateTime();
  // 设置每秒钟刷新一次
  setInterval(updateDateTime, 1000);
});
// 在组件销毁时清除定时器
onUnmounted(() => {
  clearInterval(updateDateTime);
});

const btn_tab1 = (id) => {
  setTab.value = id
};
const btn_tab2 = (id) => {
  setTab.value = id
}
const a_tab = (index) => {
  setAtab.value = index
}
</script>



<style lang="scss" >
@import "@/static/css/App.css";
</style>
<style src="../src/static/font/index.css"></style>
<style></style>